﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />
    <title>base</title>
    <link href="style.css" rel="stylesheet" />
</head>
<body>
    test start aaa
    <div id="bingo_app">
        <script type="text/html">
            asdfsadfdfaaaa
            {{view controller="view_test1" name='view1' app="demo" /}}
            <div class="splice">model==============================</div>
            <div class="content">
                <div>input：<input  type="text" model="[[model.input]]" /></div>
                <div>input1：<input  type="text" model="[[model.input1]]" /></div>
                <div>select：
                    <select model="[[model.select]]">
                        <option value="">请诜择</option>
                        <option value="1">1111</option>
                        <option value="2">2222</option>
                        {{for item in [3, 4] }}
                        <option value="[[item]]">{{text item /}}</option>
                        {{/for}}
                    </select>
                </div>
                <div>selectM：
                    <select model="[[model.selectM]]" multiple>
                        <option value="">请诜择</option>
                        <option value="1">1111</option>
                        <option value="2">2222</option>
                    </select>
                </div>
                <div>checkbox：<input type="checkbox" checked="[[model.checkbox]]" /></div>
                <div>radio：
                    <label><input type="radio" name="radio1" value="1" model="[[model.radio]]" />1111</label>
                {{for item in [2,3]}}
                   <label><input type="radio" name="radio1" value="[[item]]" model="[[model.radio]]" />{{text item /}}xxxx</label>
                {{/for}}
                </div>
                <div>textarea：<textarea model="[[model.textarea]]"
                                   style="width:550px;"></textarea></div>

                <div>结果: {{text console.log('model text'),JSON.stringify(model) /}}</div>
            </div>
            <div class="splice">text==============================</div>
            <div class="content" node="[[node1]]">
                {{text model.textarea /}}
            </div>
            <div class="splice">html==============================</div>
            <div class="content">
                {{html model.textarea /}}
            </div>
            <div class="splice">include==============================</div>
            <div class="content">
                {{include src="include" /}}<br />
                {{tmpl id="inc1"}}
                    includeId:{{text model.textarea /}}
                {{/tmpl}}
                {{include src="#inc1" /}}
            </div>
            <div class="splice">with==============================</div>
            <div class="content">
                {{with item in model}}
                    {{text item.textarea /}}
                {{/with}}
            </div>
            <div class="splice">if==============================</div>
            <div class="content">
                <div>
                    select：
                    <select model="[[model.select]]">
                        <option value="">请诜择</option>
                        <option value="1">1111</option>
                        <option value="2">2222</option>
                    </select>
                </div>
                <div>checkbox：<input type="checkbox" checked="[[model.checkbox]]" /></div>
                结果：
                {{if model.select == '1'}}
                    select == 1
                    {{if model.checkbox}}
                        AND model.checkbox == true
                    {{else}}
                        AND model.checkbox == false
                    {{/if}}
                {{else model.select == '2'}}
                    select == 2
                    {{if model.checkbox}}
                        AND model.checkbox == true
                    {{else}}
                        AND model.checkbox == false
                    {{/if}}
                {{else}}
                    select == else
                    {{if model.checkbox}}
                        AND model.checkbox == true
                    {{else}}
                        AND model.checkbox == false
                    {{/if}}
                {{/if}}
            </div>
            <div class="splice">for==============================</div>
            <div class="content">
                {{for item in list1}}
                <div>
                    　{{text item.id /}}:{{html item.text /}}
                    <button onclick="[[rmList($index)]]">删除</button>
                    <button onclick="[[setList($index)]]">重设行</button>
                    <button onclick="[[setListText($index)]]">重设text</button>
                </div>
                {{/for}}
                <div>
                    <button onclick="[[addList]]">添加行</button>
                </div>
            </div>
            <div class="splice">for tmpl id==============================</div>
            <div class="content">
                <!--定义tmpl111-->
                {{tmpl id="tmpl111"}}
                <div>
                    {{text item.id /}}:{{html item.text /}} | id
                </div>
                {{/tmpl}}
                <!--for 使用tmpl111-->
                {{for item in list1 tmpl=#tmpl111 /}}
            </div>
            <div class="splice">for tmpl url==============================</div>
            <div class="content">
                <!--for 使用tmpls/forTmpl.html-->
                {{for item in list1 tmpl=forTmpl /}}
            </div>
            <div class="splice">link==============================</div>
            <div class="content">
                {{link link="{ desc: '@model.textarea' }" /}}
            </div>
            <div class="splice">route==============================</div>
            <div class="content">
                {{route src="route1" name="main" /}}
            </div>
       </script>
    </div>
    <script src="../scripts/bingo2/bingo.js"></script>
    <script src="route.js"></script>
    <script type="text/javascript">
        demoApp.controller('view_test1', function ($view) {

            $view.model = {
                input: 'hello',
                select: '1',
                selectM: '2',
                checkbox: true,
                radio: '2',
                textarea: '<span>hello text</span>'
            };
            $view.modelReport = function () {
                $view.modelRes = JSON.stringify($view.model);
            };
            $view.modelRes = JSON.stringify($view.model);
            $view.$observe(function () { return $view.model; }, function (c) {
                console.log('aaaaa', c);
                //$view.modelReport();
            });

            $view.node1 = null;
            $view.$init(function () {
                console.log($view.node1);
            });

            $view.list1 = [{ id: '1', text: '1111' }, { id: '2', text: '2222' }];
            $view.addList = function () {
                var id = bingo.makeAutoId();
                $view.list1.bgPush({ id: id, text: 'text_' + id });
            };
            $view.rmList = function (index) {
                $view.list1.bgSplice(index, 1);
            };
            $view.setList = function (index) {
                var id = bingo.makeAutoId();
                $view.list1[index] = { id: id, text: 'text_' + id };
            };
            $view.setListText = function (index) {
                $view.list1[index].text = 'text_' + bingo.makeAutoId();
            }

            $view.$ready(function () {
                setTimeout(function () {
                    $view.model.input1 = 'ddddd';
                }, 1000);
            });

            window.view1 = $view;
            console.log('view_test1');
        });
        
        demoApp.command('link', function (cp) {

            cp.$tmpl('{{view /}}<div><input type="text" model="[[desc]]" /> {{text desc /}}</div>');

            cp.$init(function () {
                var p = cp.$attrs.link.$result();
                p && cp.$ownerView.$link(p);
            });

        });

        bingo.ready(function () {
            console.time('boot');
            //console.profile('boot');
            bingo.compile(document.getElementById('bingo_app')).then(function () {
                //console.profileEnd('boot');
                console.timeEnd('boot');
            });
        });
    </script>
</body>
</html>
